<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>几个注意点</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>{{msg}}</h1>
		<school></school>
		<schooltwo></schooltwo>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	//完整定义组件
	const s = Vue.extend({
		name: 'openVue',
		template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
		data() {
			return {
				name: '开放Vue',
				address: '北京'
			}
		}
	})

	// 简写定义组件,只用用对象
	const s2 = {
		name: 'openVue2',
		template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
		data() {
			return {
				name: '开放Vue2',
				address: '北京'
			}
		}
	}

	// 定义Vue实例
	new Vue({
		el: '#root',
		data: {
			msg: '欢迎学习Vue!'
		},
		// 局部注册组件
		components: {
			// 直接引用组件
			school: s,
			// 如果传入是一个对象，这里自动执行一下Vue.extend()，完成组件注册
			schooltwo: s2

		}
	})
</script>

</html>